<template>
    <view>
        <!-- <headers :title= "title" ></headers> -->
        <view class="type md6Text Han  u-border-bottom">
            <view class="type_item" :class="type == ''?'active':''" @click="type = ''">全部 <text class="type_num"
                    v-show="nums[0] > 0"></text></view>
            <view class="type_item" :class="type == 'greet'?'active':''" @click="type = 'greet'">招呼 <text
                    class="type_num" v-show="nums[1] > 0"></text></view>
            <view class="type_item" :class="type == 'chat'?'active':''" @click="type = 'chat'">沟通中 <text
                    class="type_num" v-show="nums[2] > 0"></text></view>
        </view>
        <!-- 卡片列表 -->
        <view class="list">
            <!-- <u-swipe-action> -->
                <!-- <u-swipe-action-item v-for="(item,index) in list" :key="item.id" :options="options" @click="delChat(item.id)"> -->
                    <view class="item u-border-bottom" v-for="(item,index) in list" :key="item.id" @click="goChat(item.id)" @longtap="delChat(item.id)" v-show="!type || type == item.status">
                        <image class="avatar" :src="item.company.logo" mode="aspectFill"></image>
                        <view class="info">
                            <view class="u-flex">
                                <view class="name">{{item.company.shortname || item.company.name}}</view>
                                <view class="title line-1">{{item.job.title}}</view>
                                <view class="time">{{formatTime(item.chattime)}}</view>
                            </view>
                            <view class="u-flex">
                                <view class="msg">
                                    <text class="line-1"
                                        v-if="item.last_msg.type == 'text'">{{item.last_msg.msg}}</text>
                                    <text class="line-1" v-if="item.last_msg.type == 'image'">[图片]</text>
                                </view>
                                <view class="unread" v-show="item.unread_num > 0">{{item.unread_num}}</view>
                            </view>
                        </view>
                    </view>
                <!-- </u-swipe-action-item>
            </u-swipe-action> -->
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                type: '',

                list: [],

                is_show: true,
                timer: false,

                nums: [0, 0, 0],

                options: [{
                        text: '删除',
                        style: {
                            backgroundColor: '#e45656',
                        }
                    },
                ],
                
            };
        },

        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function(options) {
            this.timer = setInterval(() => {
                if (this.is_show && uni.getStorageSync('token')) {
                    this.getList();
                }
            }, 1000 * 3);
        },

        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        onReady: function() {},

        /**
         * 生命周期函数--监听页面显示
         */
        onShow: function() {
            this.is_show = true;
            this.getList();
        },

        /**
         * 生命周期函数--监听页面隐藏
         */
        onHide: function() {

        },

        /**
         * 生命周期函数--监听页面卸载
         */
        onUnload: function() {
            if (this.timer) {
                clearInterval(this.timer);
            }
        },

        /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        onPullDownRefresh: function() {},

        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom: function() {},

        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function() {},
        methods: {
            delChat(e) {
                uni.showActionSheet({
                    itemList: ['删除'],
                    success: (res) => {
                        if(res.tapIndex === 0) {
                            this._ajax({
                                url: '/api/user/delChat',
                                data: {
                                    id: e
                                },
                                success: res => {
                                    if(res.code == 1) {
                                        this.getList();
                                    }else {
                                        this._toast(res.msg);
                                    }
                                }
                            }, 1);
                        }
                    }
                });
            },
            getList() {
                this._ajax({
                    url: '/api/user/getChatList',
                    success: res => {
                        if (res.code == 1) {
                            this.list = res.data;
                            this.showUnreadNum();
                            var nums = [0, 0, 0];
                            for (var i in this.list) {
                                nums[0] += this.list[i].unread_num;
                                if (this.list[i].status == 'greet') {
                                    nums[1] += this.list[i].unread_num;
                                }
                                if (this.list[i].status == 'chat') {
                                    nums[2] += this.list[i].unread_num;
                                }
                            }
                            this.nums = nums;
                        }
                    }
                });
            },
            showUnreadNum() {
                var num = 0;
                for (var i in this.list) {
                    num += this.list[i].unread_num;
                }

                if (num > 0) {
                    uni.setTabBarBadge({
                        index: 2,
                        text: '' + num
                    });
                } else {
                    uni.removeTabBarBadge({
                        index: 2
                    });
                }
                //#ifdef APP-PLUS
                if(num == 0 && plus.device.vendor && plus.device.vendor.toUpperCase() == 'VIVO') {
                    num = -1;
                }
                plus.runtime.setBadgeNumber(num);
                //#endif
            },
            formatTime(time) {
                var date = new Date(time * 1000),
                    str = '';
                if (date.getFullYear() != new Date().getFullYear()) {
                    str += date.getFullYear() + '-';
                } else if (date.getMonth() != new Date().getMonth() || date.getDate() != new Date().getDate()) {
                    str += (date.getMonth() + 1) + '-' + date.getDate() + ' ';
                }
                str += date.getHours() + ':' + ('0' + date.getMinutes()).slice(-2);
                return str;
            },
            goChat(id) {
                this._toView('views/detail/chatBox?id=' + id)
            }
        }
    };
</script>
<style lang="scss" scoped>
    page {
        background-color: #f5f5f5;
    }

    .type {
        width: 100%;
        height: 80rpx;
        background-color: #fff;
        line-height: 80rpx;
        padding: 0 15rpx;
        position: fixed;
        top: var(--window-top);
        left: 0;
        z-index: 9;
        display: flex;
        align-items: center;

        &_item {
            color: #999999;
            padding: 0 15rpx;
        }

        &_num {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: red;
            display: inline-block;
            vertical-align: text-top;
            margin-left: 6rpx;
        }

        .active {
            color: #3465B1 !important;
            font-size: 30upx;
        }

    }

    .list {
        margin-top: 80rpx;

        .item {
            display: flex;
            align-items: center;
            padding: 30rpx;
            background-color: #fff;

            .avatar {
                width: 100rpx;
                height: 100rpx;
                border-radius: 50%;
                margin-right: 30rpx;
            }

            .info {
                flex: 1;

                .u-flex {
                    display: flex;
                    align-items: center;

                    .name {
                        font-size: 32rpx;
                    }

                    .title {
                        color: #666;
                        flex: 1;
                        padding: 0 20rpx;
                    }

                    .time {
                        font-size: 24rpx;
                        color: #999;
                    }

                    .msg {
                        color: #666;
                        flex: 1;
                    }

                    .unread {
                        min-width: 36rpx;
                        height: 36rpx;
                        line-height: 36rpx;
                        padding: 0 5rpx;
                        background-color: #F43F3B;
                        color: #fff;
                        font-size: 24rpx;
                        border-radius: 36rpx;
                        margin-left: 20rpx;
                        text-align: center;
                    }
                }

                .u-flex+.u-flex {
                    margin-top: 10rpx;
                }
            }
        }
    }

    .line-1 {
        display: -webkit-box !important;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical !important;
    }
</style>
